<template>
  <div class="singer">
    <!-- 顶部组件 -->
    <header-nav></header-nav>
    <van-index-bar :index-list="leftList" sticky>
      <div v-for="(item, index) in rightList" :key="index">
        <van-index-anchor :index="item.name" />
        <van-cell v-for="value in item.data" :key="value.id">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div
              class="van-cell-title"
              @click="$router.push(`/singer/songs/${value.id}`)"
            >
              <van-image
                width="45"
                height="45"
                lazy-load
                :src="value.img1v1Url"
              />
              <span class="custom-title">{{ value.name }}</span>
            </div>
          </template>
        </van-cell>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { getArtistlist } from "@/api/singer";
export default {
  data() {
    return {
      leftList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        // "N",
        // "P",
        // "Q",
        // "R",
        // "S",
        // "T",
        // "W",
        // "X",
        // "Y",
        // "Z",
      ],
      rightList: [],
    };
  },
  methods: {
    ArtistListFun() {
      for (let i = 0; i < this.leftList.length; i++) {
        this.rightList.push({
          name: this.leftList[i],
        });
      }
    },
  },
  created() {
    this.ArtistListFun(); //构建对象
    for (let i = 0; i < this.leftList.length; i++) {
      getArtistlist({
        type: 1,
        area: 96,
        initial: this.leftList[i],
      }).then((data) => {
        let index = this.rightList.findIndex(
          (item) => item.name == this.leftList[i]
        );
        this.$set(this.rightList[index], "data", data.artists);
      });
    }
  },
};
</script>

<style lang="less">
.singer {
  height: 100vh;
  background: url("../assets/bg.webp") no-repeat;
  background-size: 100%;
  .van-index-bar {
    height: 88vh;
    overflow-x: hidden;
  }
  .van-cell {
    padding: 10px;
    background-color: transparent;
    color: #191515;
    font-weight: 600;
  }
  .van-cell-title {
    display: flex;
    align-items: center;
    span {
      margin-left: 20px;
    }
  }
  .van-index-anchor {
    background-color: #d9dadb;
    padding-left: 10px;
    color: #f8f8f9;
    line-height: 18px;
    height: 18px;
    font-size: 10px;
  }
}
</style>
